<template>
	<view class="container">
		<share-poster class="poster" :info="info"></share-poster>
		<view class="tips" v-if="showTips">
			<view class="mask"></view>
			<view class="content">
				<view class="close" @click="showTips = false"></view>
				<view>左右滑动更换海报样式</view>
				<view>长按图片保存到手机相册</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import sharePoster from '../components/uni-carousel/uni-carousel-poster.vue';
export default {
	data() {
		return { info: [], showTips: true };
	},
	components: { sharePoster },
	mounted() {
		this.list()
	},
	methods: {
		list() {
			http('/api/sysSharePosterInfo/getSharePoster', { data: {}, method: 'GET' }).then(result => {
				if (result.code == '200') {
					this.info = result.data || [];
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.swiperTip {
	position: absolute;
	z-index: 99;
	font-size: 18rpx;
	color: #636363;
	background: rgba(250, 204, 107, 0.5);
	text-align: center;
	font-weight: 200;
	padding: 20rpx 0;
	// width: 100%;
	// top: 10rpx;
	// left: 13%;
	// right: 13.1%;
}
.container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding-top: 10rpx;
	.tips {
		.mask {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.2);
			z-index: 10;
		}
		.content {
			font-size: 26rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #f1f1f1;
			line-height: 46rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 11;
			transform: translate(-50%, -50%);
			background: rgba(0, 0, 0, 0.8);
			padding: 26rpx;
			border-radius: 8rpx;
			.close {
				position: absolute;
				top: -28rpx;
				right: -28rpx;
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.8);
				&::before,
				&::after {
					content: '';
					width: 60rpx;
					height: 4rpx;
					border-radius: 4rpx;
					background-color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -2rpx;
					margin-left: -30rpx;
					transform: scale(0.5) rotate(45deg);
				}
				&::after {
					transform: scale(0.5) rotate(135deg);
				}
			}
		}
	}
}
</style>
